<template>
	<view class="pageBox">
		<view class="amount">
			<view class="amountTitle flex-center">
				转换额度
			</view>
			<view class="amountTitle flex-center">
				{{ total }}
			</view>
			<view class="main">


				<view class="listBox">
					<view class="listTitle flex-row">
						可转仓单
					</view>

					<view class="list">
						<view class="listItem flex-row" v-for="item in list" :key="item.id">
							<view class="item flex-center" v-if="item.exchangeInfo">
								{{ item.exchangeInfo.name }}
							</view>
							<view class="item flex-center">
								{{ item.totalNum }}张
							</view>
							<view class="item flex-center">
								<button :plain="true" class="change" @click="onChangeBtn(item)"
									v-if="item.isTran != 0">去转换</button>
								<button :plain="true" class="change2" v-if="item.isTran == 0">去转换</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>



		<my-popup-tips :showTips="showTips" :mask="true" @tipsOpen="tipsOpen" @tipsClose="tipsClose">
			<view class="tipsBox">
				<view class="tipsTitle flex-center">
					提示
				</view>

				<view class="tipsText flex-center">
					原始仓单确定转换为{{ params.exchangeInfo ? params.exchangeInfo.name : "" }}
				</view>

				<view class="tipsBtnBox flex-between">
					<button class="tipsCloseBtn" :plain="true" @click="onTipsCloseBtn">取消</button>
					<button class="tipsSureBtn" :plain="true" @click="onTipsSureBtn">确定</button>
				</view>
			</view>
		</my-popup-tips>
	</view>
</template>

<script>
	import myPopupTips from "../components/my-popup-tips/my-popup-tips.vue";
	export default {
		components: {
			"my-popup-tips": myPopupTips
		},
		data() {
			return {
				showTips: false,
				params: {},
				list: [],
				total: "",
			}
		},
		onShow() {
			this.getList();
		},
		methods: {
			onChangeBtn(item) {
				this.params = {};
				this.params = item;
				this.showTips = true;
				// console.log("this.params", this.params)

			},
			tipsOpen(param) {
				this.showTips = param;
			},
			tipsClose(param) {
				this.showTips = param;
			},
			onTipsCloseBtn() {
				this.showTips = false;
			},
			onTipsSureBtn() {
				this.$post({
					module: "Exchange",
					interface: "5004",
					data: {
						exchange_id: String(this.params.exchangeId),
					}
				}).then(res => {
					this.showTips = false;
					uni.showToast({
						title: "操作成功",
						icon: "none",
						duration: 1500,
					})
					this.getList();
				})
			},
			getList() {
				this.$post({
					module: 'Exchange',
					interface: 5003,
				}).then(res => {
					// console.log("可转仓单", res);
					this.list = res.list;
					this.total = res.total;
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.pageBox {
		width: 100%;
		min-height: calc(100vh - var(--window-top));
		background-color: #ffffff;

		.amount {
			width: 100%;
			height: 288rpx;
			background-image: url("http://www.bobei.shop/static/third/topHeadBg.png");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			padding-top: 60rpx;
			position: relative;

			.amountTitle {
				font-size: 36rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: normal;
				color: #FFFFFF;
				margin-top: 16rpx;
			}


			.main {
				width: 100%;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 0px 0px;
				position: absolute;
				left: 0;
				top: 268rpx;
				z-index: 1;
				padding: 0 30rpx;



				.listBox {
					width: 100%;

					.listTitle {
						font-size: 36rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: bold;
						color: #000000;
						line-height: 44rpx;
						padding-top: 46rpx;
					}

					.list {
						padding-top: 24rpx;

						.listItem {
							padding: 14rpx 22rpx 16rpx 26rpx;
							background: #ffffff;
							margin-bottom: 16rpx;
							background: #FFFFFF;
							box-shadow: 0px 4rpx 8rpx 0px rgba(212, 212, 212, 0.25);
							border-radius: 8rpx 8rpx 8rpx 8rpx;

							.item {
								font-size: 28rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #000000;
								line-height: 40rpx;
								word-break: break-all;

								button {
									padding: 0;
									margin: 0;
									font-size: 24rpx;
									border: none;
								}

								.change {

									background: transparent;
									border-radius: 52rpx;
									color: #F2615F;
								}

								.change2 {

									background: transparent;
									border-radius: 52rpx;
									color: #bebebe;
								}
							}

							.item:nth-of-type(1) {
								width: 30%;
								justify-content: flex-start;
							}

							.item:nth-of-type(2) {
								width: 35%;
							}

							.item:nth-of-type(3) {
								width: 35%;
								justify-content: flex-end;
							}
						}
					}
				}
			}
		}



		.tipsBox {
			width: 550rpx;
			background: #FFFFFF;
			border-radius: 32rpx;
			padding: 64rpx 48rpx;

			.tipsTitle {
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
				line-height: 40rpx;
			}

			.tipsText {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #736464;
				line-height: 40rpx;
				margin-top: 48rpx;
			}

			.tipsBtnBox {
				width: 100%;
				margin-top: 90rpx;

				button {
					padding: 0;
					margin: 0;
					width: 200rpx;
					height: 72rpx;
					border-radius: 52rpx;
					font-size: 28rpx;
				}

				.tipsCloseBtn {
					color: #F2615F;
					border: 2rpx solid #F2615F;
				}

				.tipsSureBtn {
					color: #ffffff;
					border: none;
					background: #F2615F;
				}
			}
		}
	}
</style>
